<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>支付管理-订单查询</title>

    <meta name="description" content="Dynamic tables and grids using jqGrid plugin"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="assets/css/jquery-ui.min.css"/>
    <link rel="stylesheet" href="assets/css/bootstrap-datepicker3.min.css"/>
    <link rel="stylesheet" href="assets/css/ui.jqgrid.min.css"/>

    <!-- text fonts -->
    <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
    <![endif]-->
    <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <script src="assets/angular/common-htm.js"></script>

    <!--[if lte IE 8]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">

    </style>
</head>

<body class="no-skin" ng-app="myApp" ng-controller="myCtrl">

<div id="navbar" class="navbar navbar-default ace-save-state">
    <div class="navbar-container ace-save-state common-head" id="navbar-container">

    </div><!-- /.navbar-container -->
</div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>

    <div id="sidebar" class="sidebar responsive ace-save-state">
        <script type="text/javascript">
            try {
                ace.settings.loadState('sidebar')
            } catch (e) {
            }
        </script>

        <ul class="nav nav-list common-menu">
        </ul><!-- /.nav-list -->

        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state"
               data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
    </div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">首页</a>
                    </li>
                    <li><a href="#">支付管理</a></li>
                    <li class="active">订单查询</li>
                </ul><!-- /.breadcrumb -->

            </div>

            <div class="page-content">
                <div class="page-header">
                    <h1> 订单查询 </h1>
                </div><!-- /.page-header -->
                <div class="row" id="findConditions">
                    <div class="col-xs-12">
                        <div class="col-xs-2">
                            <input name="id" type="search" class="form-control input-sm" placeholder="请输入订单流水号"
                                   aria-controls="dynamic-table" style="height: 34px;">
                        </div>
                        <div class="col-xs-2">
                            <input name="inTradeNo" type="search" class="form-control input-sm" placeholder="请输入业务订单号"
                                   aria-controls="dynamic-table" style="height: 34px;">
                        </div>

                        <div class="col-xs-2">
                            <input name="refundRequestNo" type="search" class="form-control input-sm"
                                   placeholder="请输入退款申请号" aria-controls="dynamic-table" style="height: 34px;">
                        </div>

                        <div class="col-xs-2">
                            <input name="mistakeMsg" type="search" class="form-control input-sm" placeholder="请输入异常原因"
                                   aria-controls="dynamic-table" style="height: 34px;">
                        </div>

                        <div class="col-xs-2">
                            <input name="mistakeCode" type="search" class="form-control input-sm"
                                   placeholder="请输入异常原因编码" aria-controls="dynamic-table" style="height: 34px;">
                        </div>

                        <div class="col-xs-2">
                            <select name="payWayCode" aria-controls="dynamic-table" class="form-control ">
                                <option value="">请选择支付方式</option>
                                <option value="1001">支付宝B2C支付</option>
                                <option value="1002">支付宝APP支付</option>
                                <option value="1003">支付宝手机网页支付</option>
                                <option value="1004">支付宝扫码支付</option>
                                <option value="2001">微信公众号支付</option>
                                <option value="2002">微信APP支付</option>
                                <option value="2004">微信扫码支付</option>
                                <option value="3001">银联B2C支付</option>
                                <option value="3002">银联APP支付</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-12" style="margin-top:5px">
                        <div class="col-xs-2">
                            <button id="findData" type="button" class="btn btn-sm btn-primary">查询</button>
                            <button id="resetData" type="button" class="btn btn-sm btn-primary">重置</button>
                        </div>
                    </div>
                </div>
                <br/>

                <div class="row">
                    <div class="col-xs-12">

                        <!-- PAGE CONTENT BEGINS -->
                        <table id="grid-table"></table>

                        <div id="grid-pager"></div>
                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->

            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->


    <div class="footer common-footer"></div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script src="assets/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/jquery.jqGrid.min.js"></script>
<script src="assets/js/grid.locale-en.js"></script>

<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">

    jQuery(function ($) {
        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";

        $("#resetData").click(function () {
            $("#findConditions").find("input").each(function () {
                $(this).val("");
            });
            $("#findConditions").find("select").each(function () {
                $(this).find("option").each(function () {
                    $(this).removeAttr("selected");
                });
            });

            queryOrderData();
        });

        $("#findData").click(function () {
            queryOrderData();
        });

        function queryOrderData() {
            //获取内容
            var id = $.trim($("#findConditions").find("input[name=id]").val());
            var inTradeNo = $.trim($("#findConditions").find("input[name=inTradeNo]").val());
            var refundRequestNo = $.trim($("#findConditions").find("input[name=refundRequestNo]").val());
            var mistakeMsg = $("#findConditions").find("select[name=mistakeMsg] :selected").val();
            var mistakeCode = $("#findConditions").find("select[name=mistakeCode] :selected").val();
            var payWayCode = $("#findConditions").find("select[name=payWayCode] :selected").val();

            jQuery(grid_selector).jqGrid('setGridParam', {
                mtype: 'POST',
                url: '/atomu/v1/order/queryOrderList',
                datatype: 'json',
                //发送数据
                postData: {
                    "id": id,
                    "inTradeNo": inTradeNo,
                    "refundRequestNo": refundRequestNo,
                    "mistakeMsg": mistakeMsg,
                    "mistakeCode": mistakeCode,
                    "payWayCode": payWayCode
                },
                page: 1

            }).trigger('reloadGrid');//重新载入
        }

        var parent_column = $(grid_selector).closest('[class*="col-"]');
        //resize to fit page size
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', parent_column.width());
        })

        //resize on sidebar collapse/expand
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 20);
            }
        })

        //if your grid is inside another element, for example a tab pane, you should use its parent's width:
        /**
         $(window).on('resize.jqGrid', function () {
					var parent_width = $(grid_selector).closest('.tab-pane').width();
					$(grid_selector).jqGrid( 'setGridWidth', parent_width );
				})
         //and also set width when tab pane becomes visible
         $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				  if($(e.target).attr('href') == '#mygrid') {
					var parent_width = $(grid_selector).closest('.tab-pane').width();
					$(grid_selector).jqGrid( 'setGridWidth', parent_width );
				  }
				})
         */

        jQuery(grid_selector).jqGrid(
            {
                jsonReader: {
                    root: "data",
                    page: "currentPage",
                    records: "totalCount",
                    total: "totalPage"
                },

                mtype: 'POST',
                url: '/atomu/v1/order/queryMistakeOrderList',
                datatype: "json",
                height: 320,
                colNames: ['订单所属商户', '订单流水号', '业务订单号', '第三方订单号IN', '第三方订单号OUT', '支付方式', '订单金额', '退款金额', '退款申请号', '异常原因', '异常原因编码'],
                colModel: [
                    {name: 'merchantName', width: 130},
                    {name: 'id', width: 130},
                    {name: 'inTradeNo', width: 130},
                    {name: 'outTradeNo', width: 130},
                    {name: 'trxNo', width: 130},
                    {name: 'payWayCode', width: 80, formatter: transformPayWayCode},
                    {name: 'orderFee', width: 80, formatter: transformOrderFee},
                    {name: 'refundFee', width: 80},
                    {name: 'refundRequestNo', width: 100, formatter: transformRefundStatus},
                    {name: 'mistakeMsg', width: 100, formatter: transformRefundStatus},
                    {name: 'mistakeCode', width: 100, formatter: transformRefundStatus},

                    {
                        name: 'orderTime', width: 130,
                        formatter: function (value, row, index) {
                            var unixTimestamp = new Date(value);
                            return unixTimestamp.toLocaleString();
                        }
                    },
                    {name: 'orderIp', width: 130}
                ],

                viewrecords: true, //显示记录数信息
                rowNum: 10,
                rowList: [10, 20, 30, 50],
                pager: pager_selector,
                altRows: true,
                //toppager: true,

                multiselect: false,
                //multikey: "ctrlKey",
                multiboxonly: true,

                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },

                caption: "订单列表<small>（金额单位：元）<small>"
                //,autowidth: true,

            });
        $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

        function transformOrderFee(cellvalue, options, rowObject) {
            return cellvalue + " 元";
        }

        function transformOrderStatus(cellvalue, options, rowObject) {
            if (cellvalue == 10) {
                return "创建订单";
            } else if (cellvalue == 20) {
                return "订单关闭";
            } else if (cellvalue == 30) {
                return "支付失败";
            } else if (cellvalue == 40) {
                return "支付成功";
            } else if (cellvalue == 50) {
                return "部分退款";
            } else if (cellvalue == 60) {
                return "部分退款成功";
            } else if (cellvalue == 70) {
                return "部分退款失败";
            } else if (cellvalue == 80) {
                return "全部退款";
            } else if (cellvalue == 90) {
                return "全部退款成功";
            } else if (cellvalue == 100) {
                return "全部退款失败";
            } else {
                return "";
            }
        }

        function transformPayStatus(cellvalue, options, rowObject) {
            if (cellvalue == 10) {
                return "未支付";
            } else if (cellvalue == 20) {
                return "支付失败";
            } else if (cellvalue == 30) {
                return "已支付";
            } else if (cellvalue == 40) {
                return "部分退款";
            } else if (cellvalue == 50) {
                return "全额退款";
            } else {
                return "";
            }

        }

        function transformRefundStatus(cellvalue, options, rowObject) {
            if (cellvalue == 1) {
                return "可退款";
            } else if (cellvalue == 2) {
                return "退款中";
            } else {
                return "";
            }

        }

        //enable search/filter toolbar
        //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
        //jQuery(grid_selector).filterToolbar({});


        //switch element when editing inline
        function aceSwitch(cellvalue, options, cell) {
            setTimeout(function () {
                $(cell).find('input[type=checkbox]')
                    .addClass('ace ace-switch ace-switch-5')
                    .after('<span class="lbl"></span>');
            }, 0);
        }

        //enable datepicker
        function pickDate(cellvalue, options, cell) {
            setTimeout(function () {
                $(cell).find('input[type=text]')
                    .datepicker({format: 'yyyy-mm-dd', autoclose: true});
            }, 0);
        }


        //navButtons
        jQuery(grid_selector).jqGrid('navGrid', pager_selector,
            { 	//navbar options
                edit: false,
                editicon: 'ace-icon fa fa-pencil blue',
                add: false,
                addicon: 'ace-icon fa fa-plus-circle purple',
                del: false,
                delicon: 'ace-icon fa fa-trash-o red',
                search: false,
                searchicon: 'ace-icon fa fa-search orange',
                refresh: true,
                refreshicon: 'ace-icon fa fa-refresh green',
                view: true,
                viewicon: 'ace-icon fa fa-search-plus grey',
            },
            {
                //search form
                recreateForm: true,
                afterShowSearch: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw: function () {
                    style_search_filters($(this));
                }
                ,
                multipleSearch: true,
                /**
                 multipleGroup:true,
                 showQuery: true
                 */
            },
            {
                //view record form
                recreateForm: true,
                beforeShowForm: function (e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                }
            }
        )

        function style_search_filters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }

        function style_search_form(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable')
            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }

        //it causes some flicker when reloading or navigating grid
        //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
        //or go back to default browser checkbox styles for the grid
        function styleCheckbox(table) {
            /**
             $(table).find('input:checkbox').addClass('ace')
             .wrap('<label />')
             .after('<span class="lbl align-top" />')


             $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
             .find('input.cbox[type=checkbox]').addClass('ace')
             .wrap('<label />').after('<span class="lbl align-top" />');
             */
        }


        //unlike navButtons icons, action icons in rows seem to be hard-coded
        //you can change them like this in here if you want
        function updateActionIcons(table) {
            /**
             var replacement =
             {
						'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
						'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
						'ui-icon-disk' : 'ace-icon fa fa-check green',
						'ui-icon-cancel' : 'ace-icon fa fa-times red'
					};
             $(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
             */
        }

        //replace icons with FontAwesome icons like above
        function updatePagerIcons(table) {
            var replacement =
                {
                    'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                    'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                    'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                    'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
                };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            })
        }

        function enableTooltips(table) {
            $('.navtable .ui-pg-button').tooltip({container: 'body'});
            $(table).find('.ui-pg-div').tooltip({container: 'body'});
        }

        //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

        $(document).one('ajaxloadstart.page', function (e) {
            $.jgrid.gridDestroy(grid_selector);
            $('.ui-jqdialog').remove();
        });
    });

    // 左侧菜单
    menuArr[0].child[3].isActive = true;
    menuArr[0].child[3].child[2].isActive = true;
    var userInfo = getUserInfo();
    var initData = {"moduleId": "myApp", "menuObj": menuArr, "curUserName": userInfo.account};
    commonHtml.dealCommonHtml(initData);

</script>
</body>
</html>
